﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=1">
    <meta name="format-detection" content="telephone=no">
    <meta charset="UTF-8">
    <title>子传父emit</title>
    <link rel="stylesheet" href="../css/bootstrap.css"/>
    <script src="../js/jquery-2.2.0.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
</head>
<body>
<h1>子传父emit</h1><br/>

<div id="app">
    {{name}}<br/>
    <p>定义：观察者模式又叫发布-订阅模式，它定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖它的对象都将得到通知。</p>
    <p>这是我练习子传父的事例，4.8.1有具体说明</p>
    <p>我是父组件的money:{{money}}</p>
    <child :m="money" @parent-method-and-event="parentChange"></child>
</div>
<script src="../js/vue-2.5.16.js"></script>
<script src="../node_modules/axios/dist/axios.js"></script>
<script src="../node_modules/lodash/lodash.js"></script>

<script>
    //子组件
    let child = {
        props:{
            m:{}
        },
        methods:{
            changeMoney(){
                this.$emit('parent-method-and-event',800);//已经学过vuex了回过头会发现其实就是muations里的set
            }
        },
        template:'<div><h3>父传子的金额为:{{m}}</h3><button @click="changeMoney">金额太少,子组件改父组件金额</button></div>'
    };

    var app = new Vue({
        el:'#app',
        data:{
            name:'模版数据',
            money:500
        },
        methods:{
            parentChange(val){
                console.log(val);
                this.money = val;//数据是单向的，只能父组件改变money的值，子组件本身不能修改
            }
        },
        components:{
            child
        }
    });
</script>

</body>
</html>